<template>
  <div class="app-container">
    <div style="margin-bottom:15px;">
      Your roles: {{ roles }}
    </div>
    Switch roles:
    <el-radio-group v-model="switchRoles">
      <el-radio-button label="admin" />
      <el-radio-button label="editor" />
    </el-radio-group>
  </div>
</template>

<script setup lang="ts" name="permission-page">
import { useUserStore } from "@/store/user";

const $router = useRouter()

const userStore = useUserStore()
const roles: ComputedRef = computed(() => userStore.roles)
const switchRoles = computed({
  get() {
    return roles.value[0]
  },
  set(val) {
    userStore.changeRoles(val).then(() => {
      window.location.reload();
    })
  }
})


</script>

<style lang="scss" scoped>

</style>
